<template>
  <div class="vodal-wrap">
    <div class="vodal-top">
      <div class="title">模型简介</div>
      <div class="content">
        <div class="download">
          <span>下载量：</span>
          <span class="other">{{ itemObj.download }}</span>
        </div>
        <div class="rank">
          <span>评价：</span>
          <el-rate
            v-model="itemObj.rank"
            disabled
            :colors="['#FFCE05', '#FFCE05', '#FFCE05']"
            :disabled-void-color="'#4d5352'"
          >
          </el-rate>
        </div>
        <div class="btn">研究报告</div>
      </div>
    </div>
    <div class="vodal-center">
      <div class="title">模型介绍</div>
      <div class="info">{{ itemObj.desc }}</div>
    </div>
    <div class="vodal-center">
      <div class="title">适用业务</div>
      <div class="info">{{ itemObj.info | infoArrFilter }}</div>
    </div>
    <div class="vodal-btm">
      <div class="title">关系图谱</div>
      <div class="vodal-btm-main">
        <div class="tupu" :id="`div${itemObj.id}`"></div>
        <div class="gaishu">
          <div class="gaishu-title">关系概述</div>
          <div class="gaishu-info">{{ itemObj.treeDesc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultUrl: require('../assets/images/io.png'),
    }
  },
  props: {
    itemObj: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
   
  },
}
</script>

<style lang="scss" scoped>
.vodal-wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0 25px;
  cursor: default;
  .vodal-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 20px;
      font-weight: 700;
      color: #009eff;
      padding-bottom: 10px;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #00cf5d;
        bottom: 0;
        left: 0;
      }
    }
    .content {
      display: flex;
      align-items: center;
      .download,
      .rank {
        color: #2cfcfe;
        display: flex;
        align-items: center;
        margin-right: 30px;
        .other {
          color: #fff;
          opacity: 0.8;
        }
        /deep/.el-rate__icon {
          margin: 0;
        }
      }
      .btn {
        width: 80px;
        height: 30px;
        cursor: pointer;
        background-color: #1a9efc;
        border-radius: 2px;
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        font-weight: 700;
      }
    }
  }
  .vodal-center {
    .title {
      font-size: 16px;
      color: #009cff;
      font-weight: 700;
      margin-bottom: 12px;
    }
    .info {
      font-size: 14px;
      line-height: 20px;
      color: #fff;
      opacity: 0.8;
    }
  }
  .vodal-btm {
    .title {
      font-size: 16px;
      color: #009cff;
      font-weight: 700;
      margin-bottom: 12px;
    }
    .vodal-btm-main {
      display: flex;
      .tupu {
        width: 432px;
        height: 372px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        margin-right: 32px;
      }
      .gaishu {
        width: 333px;
        color: #fff;
        overflow: hidden;
        .gaishu-title {
          font-size: 16px;
          line-height: 28px;
          font-weight: 600;
          margin: 15px 0 10px;
        }
        .gaishu-info {
          font-size: 14px;
          line-height: 20px;
        }
      }
    }
  }
}
</style>
